//*****框架样式*****
.main-box{
  @include main-text3;
  width: 100%;
  min-height: 100vh;
  padding:30rpx;
  box-sizing: border-box;
  background-color:#fff;
  padding-bottom:80rpx;
}
.main-slide{
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100vh);
}
.main-bg{
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: cover;
  background-position: center center;
}

//*****文章相关*****
//广告占位
.com-advert{
  width:100%;
  height: 280rpx;
  border-radius: 10rpx;
  margin:0 auto;
  background-color:$main-text-e;
}
//标题类样式
.com-article-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  &-left{@include main-text2;font-weight: 500;}
  &-right{@include main-text4;color:$main-text-b;}
}
.com-overflow{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.com-overflow-more{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

//*****剧本详情样式*****

//三类详情样式覆盖(体验空间)
.script-item-middle{
  .script-item-box{
    @include main-line2;
    height: 200rpx;
    .title-name{max-width: 450rpx;}
  }
  .script-item-box-img{
    width:160rpx;
  }
  .script-item-box-content-author{
    @include main-text4;
  }
}
//二类详情样式覆盖
.script-item-small{
  padding:20rpx !important;
  .script-item-box{
    height: auto;
    align-items:center !important;
  }
  .script-item-box-img{
    width:115rpx;
  }
  .script-item-box-content-author{
    @include main-text4;
    @include main-line1;
    color:$main-text-b;
    align-items: end;
    .script-item-box-content-author-text{
      overflow-x: auto;
      max-width: 360rpx;
      word-break: break-all;
    }
  }
  .script-item-box-content-title{
    align-items: center !important;
    .title-name{color:$main-text-a;@include main-text3;}
    .title-count{
      @include main-text6;
      color:$main-b;
      background-color: rgba(255, 206, 206, 0.5);
      padding:2rpx 10rpx;
      border-radius: 10rpx;
      margin-left: 10rpx;
    }
    .active-count{
      color:$main-text-b;
      background-color: rgba(220, 220, 220, 0.5);
    }
  }
  .script-item-box-content-tag{
    flex-wrap: nowrap;
    width:500rpx;
    overflow-x: auto;
  }
  .script-item-box-op{

  }
}

//一类详情
.script-item{
  position: relative;
  padding:25rpx 20rpx 20rpx;
  background-color: $main-cf;
  border-radius: 10rpx;
  &-time{@include main-text4;color:$main-text-b;margin-bottom: 20rpx;}
  &-box{
    height: 240rpx;
    align-items: flex-start !important;
    overflow: hidden;
    &-img{
      border-radius: 10rpx;
      width:185rpx;
      height:100%;
    }
    &-content{
      height: 100%;
      margin-left:25rpx;
      flex: 1;
      &-title{
        align-items: end !important;
        .title-name{
          @include main-text2;color:$main-text-e;max-width: 300rpx;
          &-time{@include main-text6;}
        }
        .title-op{button{border-radius: 30rpx;}}
      }
      &-tag{
        width:460rpx;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        &-list{
          margin-right:6rpx;
          //background-color: rgba(94, 94, 94, 0.2);
          //border: 1px solid transparent;
        }
      }
      &-author{
        color:$main-text-e;
        @include main-text4;
      }
      &-op{
        &-time{@include main-text4;}
        &-btn{}
      }
      //二级样式
      &-detail{
        @include main-text4;
        align-items: end !important;
        &-text{
          flex: 1;
          color:$main-text-b;
          -webkit-line-clamp:2;
        }
        &-btn{}
      }

    }
  }
  &-label{
    position: absolute;
    top:0;
    right:0;
    width:145rpx;
    height: 34rpx;
    background-color: $main-e;
    &-arrow{
      display: inline-block;
      height:0;
      width: 0;
      border-top: 17rpx solid transparent;
      border-left: 20rpx solid #fff;
      border-bottom: 17rpx solid transparent;
    }
    &-text{
      margin-right: 15rpx;
      @include main-text5;
      color: $main-text-e;
    }
  }
}

//剧本管理通用样式
.com-card{
  @include main-text4;
  @include shadow-a;
  @include main-line3;
  border-radius: 20rpx;
  padding:20rpx;
  background-color: $main-cf;
  &-head{
    flex-wrap: nowrap;
    line-height:1.5;
    &-title{
      font-weight: 500;
      width: 120rpx;
      flex-shrink: 0;
    }
    &-time{
      @include main-text5;
      flex-grow: 1;
      &-label{width:120rpx;/*text-align: right;*/}
      &-text{}
    }
    &-foot{
      @include main-text5;
      width:180rpx;
      color:$main-e;
      &-role{
        color:$main-text-b;
      }
    }
  }
  &-content{
    flex-wrap: nowrap;
    @include main-line1;
    border-top: .5px solid $main-text-c;
    color:$main-text-b;
    padding-top:20rpx;
    &-label{width: 120rpx;flex-shrink: 0;}
    &-player{flex-grow: 1;}
  }
}




//*****icon部件*****

.icon-nodata{
  margin-top: 45%;
}
.icon-tip{
  background-color:rgba(255,255,255,.3);
  padding:5rpx 12rpx;
  border-radius: 12rpx;
}
.icon-btn-no{
  background-color: transparent;
  padding:0;
  color:inherit;
  cursor:none;
  &:after{
    content:none;
  }
}
.icon-btn-s1{
  position: absolute;
  bottom:100rpx;
  width: 88%;
  left: 50%;
  transform: translateX(-50%);
  line-height:2.55 !important;
  border-radius:40rpx !important;
  &:after{border-radius:80rpx;border:none;}
}
.icon-btn-s1-auto{
  width: 88%;
  line-height:2.55 !important;
  border-radius:40rpx !important;
  &:after{border-radius:80rpx;border:none;}
}

.icon-btn-s2{
  @include main-text4;
}
.icon-btn-s3{
  @include main-text5;
}
.com-btn-disabled{opacity: .6};



.icon-btn-a,.icon-btn-b,.icon-btn-c,.icon-btn-d,.icon-btn-e,.icon-btn-f{
  padding:0 20rpx;
  line-height: 2;
  border-radius: 10rpx;
  &:after{border-radius:20rpx;border:none;}
}
.icon-btn-a{
  color:$main-text-e !important;
  background-color:$main-a !important;
}
.icon-btn-b{
  color:$main-text-e !important;
  background-color:$main-text-a !important;
}
.icon-btn-c{
  color:$main-text-e !important;
  background-color:$main-b !important;
}
.icon-btn-d{
  color:$main-text-b !important;
  background-color:$main-text-d !important;
}
.icon-btn-e{
  color:$main-text-a !important;
  background-color:$main-text-d !important;
}
//重写组件标签样式
.feat-grid:deep(.u-size-default){
  padding:13rpx !important;
  font-size: 26rpx !important;
}
.feat-grid:deep(.u-size-mini){
  //padding:10rpx 14rpx !important;
  line-height: 1.2 !important;
  font-size: 21rpx !important;
}
//重写组件input插槽样式
.com-textarea{
  &:deep(.u-input__right-icon){
    position: absolute;
    bottom: 5rpx;
    right: 0px;
  }
  &:deep(.u-input__textarea){
    padding: 15rpx 0 40rpx !important;
  }
  &-prompt{
    color:$main-text-b;
    @include main-text4;
  }
}


.hover {
  opacity: .6;
  transform: scale(.96);
}

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}


//底部弹窗选择样式（暂未使用）
.com-popup{
  height: 100%;
  background-color: $main-text-d;
  &-btn{
    padding:10rpx 0;
    width: 100%;
    border-radius: 0;
    &:after{
      border: none;
      border-bottom: 1px solid $main-text-d;
    }
  }
  &-cancel{
    @include main-line1;
    padding:20rpx 0;
  }
}
